<script setup>
import { getUserApi } from "../../api/user";
import { ref, onMounted } from "vue";
import dayjs from "dayjs";

const userInfo = ref({});

const toUserInfo = () => {
  uni.navigateTo({
    url: "/pages/userInfo/index",
  });
};

const toPassword = () => {
  uni.navigateTo({
    url: "/pages/auth/password",
  });
};

const logout = () => {
  uni.showModal({
    title: "提示",
    content: "是否退出登录",
    success: function (res) {
      if (res.confirm) {
        uni.removeStorageSync("token");
        uni.reLaunch({
          url: "/pages/auth/index",
        });
      }
      if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

onMounted(() => {
  getUserApi().then((res) => {
    userInfo.value = res;
  });
});
</script>

<template>
  <view class="my">
    <view class="my__header" @click="toUserInfo">
      <view class="my__header-left">
        <image
          :src="`http://localhost:3000/${userInfo.img}`"
          mode="aspectFill"
        ></image>
        <view class="my__header-info">
          <text class="my__header-nickname">{{ userInfo.nickName }}</text>
          <text class="my__header-date"
            ><span>加入时间: </span
            >{{ dayjs(userInfo.createdAt).format("YYYY-MM-DD") }}
          </text>
          <text class="my__header-desc">{{ userInfo.desc }}</text>
        </view>
      </view>
      <view class="my__header-more">
        <text class="my__header-more-text">></text>
      </view>
    </view>

    <view class="my__list">
      <view class="my__list-item" @click="toUserInfo"
        >个人信息<span>></span></view
      >
      <view class="my__list-item" @click="toPassword"
        >密码修改<span>></span></view
      >
      <view class="my__list-item" @click="logout">退出<span>></span></view>
    </view>
  </view>
</template>
